<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>添加产品品牌</title>
  <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<link rel="stylesheet" th:href="@{/css/vip.css}" type="text/css"/>

<script type="text/javascript"  th:src="@{/menu/js/jquery.form.min.js}"></script>
<script type="text/javascript" th:src="@{/menu/js/jquery.js}"></script>
<script>
    /**
     *  $(document).ready(function(){});
     *  jquery的入口方法，可以指定多个
     *  $(function(){});
     *
     *  jquery的选择器：css的选择器都支持
     *  元素选择器
     *    $("div"):选择所有的div，相当于：document.getElementsByTagName("div");
     *  id选择器
     *    $("#idName"):选择id为idName的元素，相当于：document.getElementById("idName");
     *  类选择
     *    $(".className")
     *  父子选择器
     *  并列选择器
     *  排他选择器
     *  .....
     *
     *
     *  dom对象和jquery对象互转
     *  dom对象转jquery对象：
     *    var ele = document.getElementById("idName");
     *    $(ele)
     *  jquery对象转dom对象
     *  var ele = $("#idName");
     *  ele[0]
     *  ele.get(0)
     *
     */
    $(function(){
    $("#uploadImage").click(function() {//为id为uploadImage的元素绑定一个点击事件
        $.ajax({//$.get;$.post内部都是异步请求
            url: 'http://localhost:9999/upload',
            type: 'POST',
            cache: false,
            data: new FormData($('#uploadForm')[0]),//将id为0的uploadForm的表单作为data，会解析处理data类型
            processData: false,
            contentType: false,
            success: function(data) {//回调函数
                $("#logopath").val(data);//document.getElementById("logopath").value = data;
            }
        });
    });
});

function showImage(fileElement){
    var span = document.getElementById("show");
    //判断浏览器是否支持文件预览
    if(!window.FileReader){
        span.innerHTML = "你的浏览器不支持图片上传预览功能";
        return;
    }
    var file = fileElement.files[0];
    //用正则表达式判断是否是图片类型
    if(!/^image\/\w+$/.test(file.type)){
        alert("请按规矩出牌");
        return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload=function(e){
        span.innerHTML = "<img src="+reader.result+" alt='品牌图片'/>";
    }
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table style="width:90%; border:0; cellspacing:2; cellpadding:3; align:center">
  <tr bgcolor="6f8ac4"><td colspan="2"  > <font color="#FFFFFF">添加品牌：</font></td>
  </tr>

    <form id="brandForm" th:action="@{/control/product/brand/save}" method="post">
        <input th:type="hidden" id="logopath" th:name="logopath"/>
        <tr bgcolor="f5f5f5">
          <td width="22%" > <div align="right">品牌名称：</div></td>
          <td width="78%"> <input type="text" name="name" maxlength="40"/>
            <font color="#FF0000">*</font></td>
        </tr>
    </form>

    <form enctype="multipart/form-data"  id="uploadForm"  >
        <tr bgcolor="f5f5f5">
            <td width="22%" > <div align="right">Logo图片：</div></td>
            <td width="78%"> <input type="file" name="logofile" accept="image/png,image/gif,image/jpeg" id="logofile" size="50" onchange="showImage(this)">
                <button  type="button" id="uploadImage" >插入</button>
                <div id="show"></div>
            </td>
        </tr>
    </form>
    <tr bgcolor="f5f5f5">
        <td colspan="2"> <div align="center">
            <input form="brandForm" type="submit" name="SYS_SET" value=" 确 定 " class="frm_btn">
        </div></td>
    </tr>
</table>
<br>
</body>
</html>